<template>
  <div class="shader-basic">
    <h1>着色器</h1>
    <p>着色器是WebGL中的核心概念，它们是在GPU上运行的小程序，用于处理顶点和像素数据。WebGL使用两种类型的着色器：顶点着色器和片元着色器。</p>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="shader-card">
          <template #header>
            <div class="card-header">
              <h3>顶点着色器 (Vertex Shader)</h3>
            </div>
          </template>
          <p>顶点着色器负责处理顶点数据，主要功能包括：</p>
          <ul>
            <li>顶点坐标变换</li>
            <li>顶点颜色计算</li>
            <li>纹理坐标处理</li>
            <li>光照计算</li>
          </ul>
          <div class="code-example">
            <pre><code>
// 顶点着色器示例
attribute vec4 a_Position;
void main() {
  gl_Position = a_Position;
  gl_PointSize = 10.0;
}
            </code></pre>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="shader-card">
          <template #header>
            <div class="card-header">
              <h3>片元着色器 (Fragment Shader)</h3>
            </div>
          </template>
          <p>片元着色器负责处理像素颜色，主要功能包括：</p>
          <ul>
            <li>颜色计算</li>
            <li>纹理采样</li>
            <li>光照效果</li>
            <li>特殊效果</li>
          </ul>
          <div class="code-example">
            <pre><code>
// 片元着色器示例
precision mediump float;
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
            </code></pre>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="info-section">
      <template #header>
        <div class="card-header">
          <h3>GLSL语言</h3>
        </div>
      </template>
      <p>GLSL (OpenGL Shading Language) 是用于编写着色器的专门语言，它具有以下特点：</p>
      <ul>
        <li>类C语言语法</li>
        <li>内置向量和矩阵类型</li>
        <li>丰富的内置函数</li>
        <li>精度限定符</li>
      </ul>
    </el-card>
  </div>
</template>

<style scoped>
.shader-basic {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #303133;
  margin-bottom: 20px;
}

.shader-card {
  height: 100%;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  color: #409EFF;
}

p {
  line-height: 1.6;
  color: #606266;
}

ul {
  list-style-type: disc;
  padding-left: 20px;
  color: #606266;
}

li {
  margin: 10px 0;
}

.code-example {
  margin-top: 20px;
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
}

code {
  font-family: monospace;
  color: #409EFF;
}

pre {
  margin: 0;
  white-space: pre-wrap;
}

.info-section {
  margin-top: 30px;
}
</style>